<template>
  <div>
    <n-grid :x-gap="10">
      <n-grid-item :span="5">
        <GoalTree></GoalTree>
      </n-grid-item>
      <n-grid-item :span="19">
        <StageTable :type="type"></StageTable>
      </n-grid-item>
    </n-grid>
  </div>
</template>

<script lang="ts">
import {post, Response} from '@/api/http'
import {addGoal, addLifeModeItems, getGoalsList, getTableList} from '@/api/url'
import { renderTag } from '@/hooks/form'
import {
  TableActionModel,
  usePagination,
  useRenderAction,
  useRowKey,
  useTable,
  useTableColumn,
  useTableHeight,
} from '@/hooks/table'
import {DataTableColumn, FormProps, NAvatar, useDialog, useMessage, NSlider,NInput,NTime} from 'naive-ui'
import {defineComponent, h, nextTick, onMounted, reactive, ref, shallowReactive, watch} from 'vue'
import useUserStore from "@/store/modules/user";
import { DataFormType, ModalDialogType, FormItem } from '@/types/components'
import UseSurfaceSettingStore from "@/store/modules/surfaceSetting";
import {renderTimePicker} from "@/hooks/form";
import GoalTree from "@/views/field/goal/GoalTree.vue"
import StageTable from "@/views/field/stage/StageTable.vue";


export default defineComponent({
  name: 'GoalPanel',
  components: {StageTable, GoalTree},
  setup() {
    const type = ref(0)
    return {
      type,
      pattern: ref(''),
    }
  },
})
</script>

<style lang="scss" scoped>
.avatar-container {
  position: relative;
  width: 30px;
  margin: 0 auto;
  vertical-align: middle;
  .avatar {
    width: 100%;
    border-radius: 50%;
  }
  .avatar-vip {
    border: 2px solid #cece1e;
  }
  .vip {
    position: absolute;
    top: 0;
    right: -9px;
    width: 15px;
    transform: rotate(60deg);
  }
}
.gender-container {
  .gender-icon {
    width: 20px;
  }
}
</style>
